<template>
    <div style="padding-bottom:70px;">
        <div class="content__title pro__title__top">{{userInfo.prepare_title}}</div>
        <div class="raises__piece__top">
            <van-image
                round
                :src="userInfo.headimgurl"
                :show-error="true"
                :error-icon="require('@/assets/err.jpg')"
                class="img"
            />
            <p>
                <b>{{userInfo.nickname}}</b>
                <i>发起救助</i>
            </p>
            <span>个人求助</span>
        </div>
        <div class="detail__box">
            <div class="line"></div>
            <div class="detail__info">
                <div class="detail__info__piece">
                    <p>
                        <span>{{userInfo.prepare_money}}</span>
                        <br />目标金额(元)
                    </p>
                </div>
                <div class="detail__info__piece">
                    <p>
                        <span>{{userInfo.already_money}}</span>
                        <br />已筹金额(元)
                    </p>
                </div>
                <div class="detail__info__piece">
                    <p>
                        <span>{{userInfo.donation_count}}</span>
                        <br />捐助次数
                    </p>
                </div>
            </div>
        </div>
        <div class="titlebox">
            <p>求助人的故事</p>
        </div>
        <div class="story-box">
            <div class="story-content">
                <p class="max-height">{{userInfo.prepare_describe}}</p>
                <!-- <div class="story-mask"></div> -->
            </div>
            <!-- <p class="show-story">
                展开全文
                <img src="@/assets/icon-down-arrow.png" />
            </p>
            <p class="show-story" style="display: none;">
                收起全文
                <img src="@/assets/icon-up-arrow.png" />
            </p>-->
            <ul class="story-imgUl">
                <li v-for="(item,index) in imgs" :key="index" @click="imgshow(index)">
                    <!-- <img class="img" :src="item" /> -->
                    <van-image
                        :src="item"
                        :show-error="true"
                        :error-icon="require('@/assets/err.jpg')"
                        class="img"
                    />
                </li>
            </ul>
        </div>
        <div class="titlebox">
            <p v-if="witnessInfo.length">{{witnessInfo.length}}人已证明情况属实</p>
            <p v-else>暂无证明人</p>
            <i class="toCashOut" @click="toCashOut()">帮他证明</i>
        </div>
        <ul class="prover-box" v-if="witnessInfo.length">
            <li v-for="(item,index) in witnessInfo.slice(0,5)" :key="index">
                <van-image
                    round
                    :src="item.headimgurl"
                    :show-error="true"
                    :error-icon="require('@/assets/err.jpg')"
                    class="icon-box"
                />
            </li>
            <li @click="toCertifierList()">
                <div class="icon-box icon-arrow">
                    <img src="@/assets/icon-arrow-right.png" />
                </div>
            </li>
        </ul>
        <div class="titlebox">
            <p>资料证明</p>
            <i v-if="userInfo.oneself == 1" @click="toDetailInfo()">查看资料</i>
            <i v-else class="toCashOut" @click="toComplaint()">质疑/举报</i>
        </div>
        <div class="proof-box">
            <div class="proof-content">
                <div class="proof-piece">
                    <span class="proof-label">患者姓名</span>
                    <div class="proof-text">
                        <p>{{proveInfo.user_name}}</p>
                        <span>
                            <img src="@/assets/select.png" />身份证审核通过
                        </span>
                    </div>
                </div>
                <div class="proof-piece">
                    <span class="proof-label">所患疾病</span>
                    <div class="proof-text">
                        <p>{{proveInfo.illness_name}}</p>
                        <span>
                            <img src="@/assets/select.png" />诊断证明资料审核通过
                        </span>
                        <span>
                            <img src="@/assets/select.png" />
                            就诊于{{proveInfo.hospital_name}}
                        </span>
                    </div>
                </div>
                <div class="proof-piece">
                    <span class="proof-label">收款方</span>
                    <div class="proof-text">
                        <p>{{gatheringInfo.bank_username}}({{gatheringInfo.relation}})</p>
                        <span>
                            <img src="@/assets/select.png" />身份证审核通过
                        </span>
                        <span>
                            <img src="@/assets/select.png" />关系证明审核通过
                        </span>
                        <span>
                            <img src="@/assets/select.png" />收款银行卡实名校验通过
                        </span>
                    </div>
                </div>
                <div class="proof-piece">
                    <span class="proof-label">发起人承诺</span>
                    <div class="proof-text">
                        <p>发起人已承诺所提交的文字与图片资料完全真实，无任何虚构事实及隐瞒真相的情况，如有不实，发起人愿承担全部法律责任</p>
                    </div>
                </div>
                <div class="proof-piece">
                    <span class="proof-label">平台声明</span>
                    <div class="proof-text">
                        <p>该求助信息不属于慈善公开募捐，真实性由信息发布者个人负责，您了解详情后再进行帮助。</p>
                    </div>
                </div>
                <!-- <span class="proof-more">
                    收起
                    <img src="@/assets/up-arrow.png" alt />
                </span>-->
            </div>
        </div>
        <div class="titlebox" v-if="donationInfo.length>0">
            <p>共{{userInfo.donation_count}}份收到爱心</p>
        </div>
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="DonateListAdd"
        >
            <div>
                <div class="help-list-box" v-if="donationInfo.length>0">
                    <div class="help-list-piece" v-for="(item,index) in donationInfo" :key="index">
                        <van-image
                            round
                            :src="item.headimgurl"
                            :show-error="true"
                            :error-icon="require('@/assets/err.jpg')"
                            class="piece-user-icon"
                        />
                        <div class="help-list-piece-box">
                            <p class="titles">
                                <b>{{item.nickname}}</b>
                                <span>帮助了</span>
                                <i>{{item.donator_money}}元</i>
                            </p>
                            <p class="message">{{item.donator_desc}}</p>
                            <p class="minute">{{item.create_time}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        <footer>
            <div>
                <div class="footer-content">
                    <div class="footer-share" @click="share()">
                        <img src="@/assets/share.png" />
                        转发
                    </div>
                    <div class="footer-button" @click="toHelp()">我也来帮助</div>
                </div>
            </div>
        </footer>
        <div class="layer" v-if="layer" @click="layer=false">
            <img src="@/assets/zf.png" />
        </div>
    </div>
</template>

<script>
import { List, ImagePreview, Image, Dialog, Toast } from "vant";
import wx from "weixin-js-sdk";
import {
    userFundraisingListDeatil,
    getInformShoukuanren,
    fundraisingDonateList,
    userFundraisingCertifierList,
    share,
    transpond
} from "@/api/api";
export default {
    components: {
        [List.name]: List,
        [Image.name]: Image,
        [Dialog.name]: Dialog
    },
    data() {
        return {
            id: "",
            userInfo: {}, //用户
            proveInfo: {}, //用户证明
            witnessInfo: [], //证明人
            gatheringInfo: {}, //收款人
            donationInfo: [], //捐款人
            donationAll: [],
            donationAllLength: 0,
            imgs: [],
            pageNum: 1,
            pageSize: 0,
            loading: false,
            finished: true,
            layer: false,
            show: false,
            startPosition: 0,
            index: 0
        };
    },
    created() {
        this.id = this.$route.query.id;
        this.getData(); //获取用户信息
        this.DonateList(); //获取捐款人信息
    },
    methods: {
        getData() {
            userFundraisingListDeatil({ prepare_id: this.id }).then(res => {
                if (res.code == "0") {
                    for (let i in res.prove) {
                        if (!res.prove[i]) {
                            Toast("请填写完整信息");
                            this.toDetailInfo();
                        }
                    }
                    this.userInfo = res.fundraisingDetail;
                    this.proveInfo = res.prove;
                    let imgs = this.userInfo.prepare_pic_url.split(",");
                    for (let i = 0; i < imgs.length; i++) {
                        this.imgs.push(
                            "http://user-prepare.oss-cn-beijing.aliyuncs.com/" +
                                imgs[i]
                        );
                    }
                    this.WXshare();
                }
            });
            getInformShoukuanren({ prepare_id: this.id }).then(res => {
                if (res.code == "0" && res.results) {
                    this.gatheringInfo = res.results;
                } else {
                    Toast("请填写完整信息");
                    this.toDetailInfo();
                }
            });
            userFundraisingCertifierList({
                prepare_id: this.id,
                pageNum: 1
            }).then(res => {
                if (res.code) {
                    this.witnessInfo = res.results;
                }
            });
        },
        DonateList() {
            fundraisingDonateList({
                prepare_id: this.id,
                pageNum: 1
            }).then(res => {
                this.donationAll = res.results;
                this.donationAllLength = res.msg;
                if (this.donationAllLength < 40) {
                    for (let i = 0; i < this.pageNum * 10; i++) {
                        this.pageSize++;
                        if (i >= this.donationAllLength) {
                            this.finished = true;
                            return false;
                        }
                        this.donationInfo.push(this.donationAll[i]);
                    }
                } else {
                    for (let i = 0; i < 10; i++) {
                        let idx = parseInt(Math.random() * 40);
                        this.donationInfo.push(this.donationAll[idx]);
                    }
                }
                this.finished = false;
                this.loading = false;
            });
        },
        DonateListAdd() {
            this.pageNum++
            if (this.donationAllLength < 40) {
                for (let i = this.pageSize; i < this.pageNum * 10; i++) {
                    this.pageSize++;
                    if (i >= this.donationAllLength) {
                        this.finished = true;
                        return false;
                    }
                    this.donationInfo.push(this.donationAll[i]);
                }
            } else {
                for (let i = 0; i < 10; i++) {
                    let idx = parseInt(Math.random() * 40);
                    this.donationInfo.push(this.donationAll[idx]);
                }
            }
            this.finished = false;
            this.loading = false;
        },
        toComplaint() {
            Dialog.confirm({
                title: "举报须知",
                message:
                    "你应保证你的举报行为基于善意，并代表你本人真实意愿。用心筹作为中立的平台服务者，收到你的举报后，会尽快判断并进行处理。我们将采取合理的措施保护你的个人信息；除法律法规规定的情形外，不会向第三方公开、透露你的个人信息。"
            })
                .then(() => {
                    this.$router.push({
                        path: "/Complaint",
                        query: { id: this.id }
                    });
                })
                .catch(() => {});
        },
        imgshow(index) {
            this.startPosition = index;
            ImagePreview({
                startPosition: this.startPosition,
                closeable: true,
                closeOnPopstate: true,
                images: this.imgs
            });
        },
        WXshare() {
            let that = this;
            share({ url: location.href.split("#")[0] }).then(res => {
                wx.config({
                    debug: false,
                    appId: "wx2c31ac22d50b2954",
                    timestamp: res.results.timestamp,
                    nonceStr: res.results.nonceStr,
                    signature: res.results.signature,
                    jsApiList: [
                        "updateAppMessageShareData",
                        "updateTimelineShareData"
                    ]
                });
                wx.ready(function() {
                    wx.updateAppMessageShareData({
                        title: that.userInfo.prepare_title, // 分享标题
                        desc: that.userInfo.prepare_describe, // 分享描述
                        link:
                            "http://yongxinchou.com.cn/front/myIndex.html?#/Detail?id=" +
                            that.id, // 分享链接
                        imgUrl: that.imgs[0], // 分享图标
                        success: function() {
                            // Toast("成功分享到朋友圈");
                            console.log(
                                "http://yongxinchou.com.cn/front/myIndex.html?#/Detail?id=" +
                                    that.id,
                                "22222222222"
                            );
                            transpond({ id: that.id }).then(res => {});
                            that.layer = false;
                        },
                        cancel: function() {
                            console.log(
                                "http://yongxinchou.com.cn/front/myIndex.html?#/Detail?id=" +
                                    that.id,
                                "22222222222"
                            );
                            Toast("分享失败,您取消了分享!");
                            that.layer = false;
                        }
                    });
                    wx.updateTimelineShareData({
                        title: that.userInfo.prepare_title, // 分享标题
                        desc: that.userInfo.prepare_describe, // 分享描述
                        link:
                            "http://yongxinchou.com.cn/front/myIndex.html?#/Detail?id=" +
                            that.id, // 分享链接
                        imgUrl: that.imgs[0], // 分享图标
                        success: function() {
                            // Toast("成功分享好友");
                            console.log(
                                "http://yongxinchou.com.cn/front/myIndex.html?#/Detail?id=" +
                                    that.id,
                                "22222222222"
                            );
                            transpond({ id: that.id }).then(res => {});
                            that.layer = false;
                        },
                        cancel: function() {
                            console.log(
                                "http://yongxinchou.com.cn/front/myIndex.html?#/Detail?id=" +
                                    that.id,
                                "22222222222"
                            );
                            Toast("分享失败,您取消了分享!");
                            that.layer = false;
                        }
                    });
                });
                wx.error(function(res) {
                    Toast("err", res);
                });
            });
        },
        share() {
            this.layer = true;
        },
        toDetailInfo() {
            this.$router.push({
                path: "/DetailInfo",
                query: { id: this.id }
            });
        },
        toHelp() {
            this.$router.push({
                path: "/Help",
                query: { id: this.id }
            });
        },
        toCashOut() {
            this.$router.push({
                path: "/Certifier",
                query: { id: this.id }
            });
        },
        toCertifierList() {
            this.$router.push({
                path: "/CertifierList",
                query: { id: this.id }
            });
        }
    }
};
</script>

<style scoped>
.content .pro__title__top {
    min-height: 32px;
    box-sizing: content-box;
}
.content__title {
    padding: 0 0 16px;
    margin: 16px 24px;
    font-size: 24px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.77777778rem;
}
.raises__piece__top {
    position: relative;
    height: 24px;
    margin-bottom: 16px;
}
.raises__piece__top .img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.raises__piece__top p {
    margin-left: 56px;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    height: 24px;
}
.raises__piece__top p b {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
    height: 23px;
    font-size: 14px;
    line-height: 23px;
}
.raises__piece__top p i {
    text-align: left;
    font-style: normal;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.32);
    height: 23px;
    line-height: 23px;
    margin-left: 0.22222222rem;
    text-indent: 0;
}
.raises__piece__top span {
    margin-left: auto;
    position: absolute;
    right: 1.33333333rem;
    top: 0rem;
    display: block;
    width: 65px;
    height: 24px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 0.22222222rem;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.56);
    text-align: center;
    line-height: 23px;
}
.detail__box {
    margin: 0 16px 0;
}
.detail__box .line {
    height: 1px;
    background: rgba(0, 0, 0, 0.04);
    margin: 0 8px;
}
.detail__info {
    display: flex;
    position: relative;
    padding-top: 11px;
    padding-bottom: 16px;
    justify-content: space-between;
    align-items: center;
}
.detail__info__piece {
    width: 33.5%;
}
.detail__info__piece p {
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
}
.detail__info__piece p span {
    font-size: 22px;
    font-weight: bold;
    color: #ff3c3c;
    line-height: 1.6;
    display: inline-block;
}
.titlebox {
    height: 68px;
    padding: 24px 24px 16px;
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 3.7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.titlebox i {
    border-bottom: 1px solid rgba(0, 0, 0, 0.32);
    line-height: 17px;
    font-size: 12px;
    margin-left: 8px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.56);
    display: block;
    font-style: normal;
}
.titlebox i.toCashOut {
    color: #ff3c3c;
    border-bottom: 1px solid #ff3c3c;
}
.prover-box {
    margin: 0 6.4%;
    padding: 0;
    width: 87.2%;
    display: flex;
    justify-content: start;
}
.prover-box li {
    position: relative;
    width: 48px;
    height: 48px;
    margin-right: 8px;
    margin-bottom: 0.44444444rem;
}
.prover-box li .icon-box {
    overflow: hidden;
    border-radius: 50%;
    width: 48px;
    height: 48px;
}
.prover-box li .icon-box img {
    display: block;
    width: 48px;
    height: 48px;
}
.prover-box li .icon-arrow {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: center;
    align-items: center;
}
.prover-box li .icon-arrow img {
    width: 16px;
    height: 16px;
}

.prover-info-box {
    box-sizing: border-box;
    margin: 0.44444444rem 6.4% 0rem;
    padding: 0.88888889rem 0.88888889rem 0.88888889rem;
    width: 87.2%;
    background: #f5f5f5;
    border-radius: 12px;
}
.prover-info-box .prover-info-title {
    font-size: 0.77777778rem;
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.11111111rem;
    margin-bottom: 0.44444444rem;
}
.prover-info-box .prover-info-text {
    font-size: 0.77777778rem;
    font-family: PingFangSC-Regular;
    color: rgba(0, 0, 0, 0.8);
    line-height: 14px;
    word-wrap: break-word;
}
.prover-info-box .prover-info-title i {
    font-style: normal;
    font-size: 0.55555556rem;
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    line-height: 0.55555556rem;
    padding: 0.27777778rem 0.16666667rem;
    border-radius: 0.22222222rem;
    display: inline-block;
    text-align: center;
}
.prover-info-box .prover-info-title .red-tap {
    color: #ff3c3c;
    background: rgba(255, 60, 60, 0.08);
    border: 0.05555556rem solid rgba(255, 60, 60, 0.04);
}
.box {
    width: 100%;
    padding: 0 24px;
}
.story-box {
    box-sizing: border-box;
    width: 100%;
    padding: 0 24px;
}
.story-content {
    position: relative;
    margin: 0 auto;
    font-size: 16px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.64);
    line-height: 1.6;
}
.story-mask {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 42px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        #ffffff 100%
    );
}
.story-box .show-story {
    width: 92px;
    height: 28px;
    background: rgba(255, 60, 60, 0.08);
    border-radius: 0.77777778rem;
    font-size: 12px;
    font-weight: 400;
    color: #ff3c3c;
    line-height: 28px;
    text-align: center;
    margin: 8px auto 0;
}
.show-story img {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-left: 4px;
}
.story-imgUl {
    margin: 0;
    padding: 0;
    margin: 16px 8px 0 0;
    width: 100%;
}
.story-imgUl li {
    width: calc(100vw / 4 - 20px);
    height: calc(100vw / 4 - 20px);
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 0.44444444rem;
    overflow: hidden;
    display: inline-block;
}
.story-imgUl li .img {
    width: 100%;
    height: 100%;
    display: block;
}
.proof-box {
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
}
.proof-content {
    width: 100%;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 0.88888889rem;
    padding-bottom: 16px;
}
.proof-piece {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    padding: 16px;
    box-sizing: border-box;
}
.proof-piece {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    padding: 16px;
}
.proof-label {
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: 12px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 18px;
}
.proof-text {
    margin-left: 74px;
}
.proof-text p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.1;
}
.proof-text span {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    display: block;
    position: relative;
    padding-left: 19px;
    color: #64c832;
}
.proof-text span img {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    margin: auto;
    margin-right: 5px;
}
.proof-piece:last-of-type {
    border-bottom: none;
}
.proof-content .proof-more {
    text-align: center;
    margin: 0 auto;
    display: flex;
    width: 112px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.56);
    line-height: 20px;
}
.proof-more img {
    width: 16px;
    height: 16px;
    margin-left: 4px;
}
.help-list-box {
    box-sizing: border-box;
    width: 100%;
    padding: 0 24px;
}
.help-list {
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding-bottom: 16px;
}
.help-list-piece {
    box-sizing: border-box;
    padding-left: 56px;
    width: 100%;
    position: relative;
}
.piece-user-icon {
    position: absolute;
    top: 16px;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.help-list-piece-box {
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding: 16px 0;
}
.titles {
    font-size: 0;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 18px;
    display: flex;
}
.titles b {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
    height: 23px;
    font-size: 14px;
    line-height: 18px;
}
.titles span {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 18px;
}
.titles i {
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    color: #ff3c3c;
    font-weight: bold;
    line-height: 18px;
}
.message {
    margin-top: 8px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 18px;
    word-break: break-all;
}
.minute {
    margin: 4px 0 0;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.32);
    line-height: 16px;
}
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 64px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
}
.footer-content {
    display: flex;
    height: 64px;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}
.footer-share {
    width: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 10px;
    font-weight: 400;
    color: #ff3c3c;
}
.footer-share img {
    width: 24px;
    height: 24px;
    margin-top: 2px;
}
.footer-button {
    position: relative;
    flex: 1;
    height: 48px;
    background: linear-gradient(360deg, #ff3c3c 0%, #ff5a00 100%);
    border: 1px solid #ff3c3c;
    border-radius: 48px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    line-height: 48px;
    text-align: center;
    top: 0;
}
.layer {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}
.layer img {
    width: 100%;
    height: 100%;
}
</style>